<template>
  <div class="block">
    <el-timeline>
      <div class="timeline_con">
        <el-timeline-item
          timestamp="未来很远我们一起找寻方向和顶峰"
          placement="top"
        >
        </el-timeline-item>
      </div>
      <el-timeline-item
        v-for="(item, index) in blogData"
        :key="index"
        :timestamp="item.createtime"
        placement="top"
      >
        <el-card v-for="items in item.datas" :key="items.id" class="Card">
          <router-link :to="'/detail/' + items.id">
            <h4>{{ items.title }}</h4>
            <p>{{ items.author }} 提交于 {{ getTime(items.create_time) }}</p>
          </router-link>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-pagination
      align="center"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handlepage"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getBlogs } from "@/api/serve";
// import { count } from "console";
import { formatDate } from "../../util/tool";
export default {
  name: "spetopic",
  data() {
    return {
      page: 1,
      total: 0,
      blogData: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //获取到最新点击的页数请求接口
    handlepage(page) {
      getBlogs({ page: page }, (res) => {
        if (res.success) {
          this.total = res.total;
          // this.blogData = res.data.data;
          let data = [];
          this.blogData = [];
          data = res.data.data;
          // 后端返回的时间有问题 进行数据处理
          for (let i = 1; i < data.length; i++) {
            let count = 0;
            if (this.blogData.length == 0) {
              this.blogData.push({
                createtime: formatDate(data[0].create_time),
                datas: res.data.data.filter((item) => {
                  return (
                    formatDate(item.create_time) ===
                    formatDate(formatDate(data[0].create_time))
                  );
                }),
              });
            }
            for (let j = 0; j < this.blogData.length; j++) {
              if (
                formatDate(data[i].create_time) !== this.blogData[j].createtime
              ) {
                count++;
              }
            }
            if (count === this.blogData.length) {
              this.blogData.push({
                createtime: formatDate(data[i].create_time),
                datas: res.data.data.filter((item) => {
                  return (
                    formatDate(item.create_time) ===
                    formatDate(data[i].create_time)
                  );
                }),
              });
            }
          }
        }
      });
    },
    init() {
      console.log(this.blogData);
      getBlogs({ page: this.page }, (res) => {
        if (res.success) {
          this.total = res.total;
          // this.blogData = res.data.data;
          let data = [];
          data = res.data.data;
          // 后端返回的时间有问题 进行数据处理
          for (let i = 1; i < data.length; i++) {
            let count = 0;
            if (this.blogData.length == 0) {
              this.blogData.push({
                createtime: formatDate(data[0].create_time),
                datas: res.data.data.filter((item) => {
                  return (
                    formatDate(item.create_time) ===
                    formatDate(formatDate(data[0].create_time))
                  );
                }),
              });
            }
            for (let j = 0; j < this.blogData.length; j++) {
              if (
                formatDate(data[i].create_time) !== this.blogData[j].createtime
              ) {
                count++;
              }
            }
            if (count === this.blogData.length) {
              this.blogData.push({
                createtime: formatDate(data[i].create_time),
                datas: res.data.data.filter((item) => {
                  return (
                    formatDate(item.create_time) ===
                    formatDate(data[i].create_time)
                  );
                }),
              });
            }
          }
        }
      });
    },
    getTime(dateStr) {
      return formatDate(dateStr);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.Card {
  margin-bottom: 15px;
  &:hover {
    transform: translate3d(0, -4px, 0);
    cursor: pointer;
  }
}
.block {
  width: 80%;
  margin: 0 auto;
  // background: #fff;
}
</style>
